import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import LoginVueTres from '../views/login/login.vue' // 导入登录页面组件
import LoginVue from '@/views/index.vue'

//导入获取用户信息的api
import { userInfoApi } from '@/http/api'
//导入类型约束的数据接口
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'
import { title } from 'process'

// 3 创建路由表(数组)
const routes: Array<RouteRecordRaw> = [  //类型约束 类型推导
    {
        path: '/ceshi',
        name: 'Ceshi',
        component: LoginVueTres // 示例路由配置
    },
    {
        path: '/login',  //获取登录的api
        name: 'Login',
        //component: () => import('@/views/index.vue')
        component: LoginVue
    },
    // 动态生成路由
    //开启路由模式  访问的菜单就是从后端里面返回的name里面的路径  
    {
        path: '/index',
        component: () => import('@/views/home/index.vue'),
        //component: LoginVueTres,
    },
    // {
    //     path: '/ums',  //一级路由
    //     // name: 'Index',
    //     //component: () => import('@/views/index.vue')
    //     component: () => import('@/views/home/index.vue'),
    //     children: [
    //         {
    //             //跟后端的数 一致  这里就是二级路由
    //             path: 'admin',   //用户列表只有admin有权限接口中获取到admin的用户就能返回数据
    //             // name: 'Admin',
    //             component: LoginVueTres
    //         },
    //     ]
    // }
    // 这里的路由配置不能写死 一定要在用户登录后 得到对应的权限路由之后再动态生成
    // 控制不同的账号权限访问不同的菜单

    

]

// 2 申明路由规则
const router = createRouter({
    routes,  // 修正属性名
    history: createWebHashHistory(), //hash模式
})



//路由守卫
router.beforeEach((to, from, next) => {
    //不写就不向下走  因为页面需要进行权限的验证 所以在这里面判断
    // 我们需要发请求来动态获取菜单数据
    // 我们会把请求成功的菜单数据放在pinal中
    //把数据 存储在pinal中    在store中进行数据管理
    const store = useUserStore()
    let token = localStorage.getItem('token');
    // 判断是否已经获取了菜单数据并且是否有token  
    if(store.menus.length ===0 && token){
        //把请求成功的数据存储在pinal中
        userInfoApi().then(res=>{
            if (res.data.code === 200) {  //需要类型约束（统一处理：G:\giteeOmss\omss\omss\src\types\user.d.ts）  不然会报错
                //console.log('这里是存储pinal后面的数据', res.data);
                store.menus = res.data.data.menus
                //存储用户信息
                store.username = res.data.data.username  //然后在Header中获取用户信息

                //生成 当前用户能访问的路由   遍历菜单数组  routers就是pinal中的存储的数据接口
                store.routers.forEach((p) => {  //遍历菜单数组  p就是pinal中的数据接口  这就是一个循环  异步操作 
                    //路由里面提供了一个方法  用来动态添级路由
                    router.addRoute({
                        path: "/" + p.name,//这里获取到的是一级路由。
                         //加一个路由名称
                        name: p.name,
                        //这里在view下面会根据不同的功能创建文件夹和vue文件 而文件夹和名称跟菜单数据一致 这样就直接跳转到对应的功能
                        component: () => import('../views/home/index.vue'),
                        //父级 在meta里面吧对应的中文存起来，然后在路由里面获取  以生成面包屑导航
                        meta: {
                            title: p.title //这里是一级路由的名称
                        },
                        //点击面包屑的一级路由  让他跳转到第一个二级路由
                        redirect: p.children?.[0] ? `/${p.name}/${p.children[0].name}` : undefined,
                        //这里生成二级路由
                        children: (p.children ?? []).map(item => ({
                            path: item.name,
                            name: item.name,
                            component: () => import(`../views/${p.name}/${item.name}.vue`),
                            meta: {
                                title: item.title, //这里就是二级路由的名称 面包屑
                            }
                        })),
                    });
                    
                });
                //等路由添加完成之后 才能进行页面跳转
                next(to.fullPath);   //重新跳转到一个制定个页面 解决页面白屏  to.fullPath明确的带上路由参数 也可以写成指定路由：router.push('/login')
                //router.push('/login')
            }
           
        }).catch(error => {
            console.error('获取用户信息失败:', error);
        })
    } 
      //如果没有token就跳转到登录页面
      else if (!token && to.path !== '/login') {
        // 如果已经获取了菜单数据，或者没有token，则直接进行页面跳转
        ElMessage.error('请先登录！');
        next('/login');
    } 
      else if (token && to.path === '/login') {
        // 如果已经获取了菜单数据，或者有token，则直接进行页面跳转到原来页面
        ElMessage.error('请先退出已登录用户，在重新登录！');
        next(from.fullPath);
    }
      else {
      next();
    }
});


export default router;